<template>
	<view class="uiwu">
		<view class="uiwu-scroll">
			<scroll-view scroll-x>
				<view class="uiwu-scroll-list uiwu-flex-align">
					<view class="item" :class="index == ActiveIndex ? 'active' : ''"
						v-for="(item, index) in menuTablist" :key="index" @tap="swiperTap(index)">
						{{ item }}
					</view>
				</view>
			</scroll-view>
		</view>
		<scroll-view scroll-y class="uiwu-list-scroll">
			<uiwu-list loading="noMore">
				<view class="uiwu-list">
					<view class="uiwu-list-item uiwu-flex-align" v-for="(item, index) in listData" :key="index"
						@tap="uiwu.openWindow(`/pages/prize/orderDetail?id=${item.id}`)">
						<image :src="item.image" mode="aspectFill"></image>
						<view class="in uiwu-flex-column">
							<view class="title uiwu-flex-space">
								<text>{{ item.store_name }}</text>
								<text>{{ item.state == 0 ? '待发货' : item.state == 1 ? '待收货' : '已完成' }}</text>
							</view>
							<view class="jifen">【{{ item.total_price }}积分】</view>
							<view class="time">{{ uiwu.formatTimestamp(item.add_time * 1000) }}</view>
						</view>
					</view>
				</view>
			</uiwu-list>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
import { integralOrderlist, uiwu } from '@/api/interface/interface';
import { onLoad } from '@dcloudio/uni-app';
import { inject, ref } from 'vue';
const menuTablist = ref<Array<string>>(['待发货', '待收货', '已完成'])
const ActiveIndex = ref<boolean>(0)
const listData = ref<Array<object>>([])
const pageNum = ref<number>(1)
const more = ref<string>('loading');
const isLock = ref<boolean>(true)
const swiperTap = (index: number) => {
	ActiveIndex.value = index
	getintegralOrderlist(false)
}
const getintegralOrderlist = async (mack: boolean = false): Promise<any> => {
	if (!mack) pageNum.value = 1
	const { data: { data }, total } = await integralOrderlist({
		state: ActiveIndex.value,
		page: pageNum.value
	});
	isLock.value = true
	uiwu.setlist({
		isMore: mack,
		listData,
		total,
		listRow: data,
		more,
		pageNum
	})
}
onLoad(() => {
	getintegralOrderlist()
})
</script>

<style lang="scss">
page {
	background-color: #e6e6e6;
}

.uiwu-scroll {
	background-color: #272323;
	width: 100%;
	height: 82rpx;

	&-list {
		padding: 0 24rpx;
		justify-content: space-between;
		height: 82rpx;

		.item {
			flex-shrink: 0;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
			height: 55rpx;
			line-height: 55rpx;

			&.active {
				text-align: center;
				width: 176rpx;
				background: url('../../static/indextab.png') no-repeat 0 0;
				background-size: 100% 100%;
				font-size: 32rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #FFFFFF;
				line-height: inherit;
				text-shadow: 0px 4rpx 0rpx #231815;
			}
		}
	}
}

.uiwu-list {
	padding: 0 24rpx;
	background-color: #fff;

	&-item {
		padding: 24rpx 0;

		image {
			width: 136rpx;
			height: 136rpx;
			border-radius: 16rpx;
			margin-right: 24rpx;
		}

		.in {
			flex: 1;
			height: 136rpx;
			justify-content: space-around;
		}

		.title {
			text {
				font-size: 28rpx;
				font-weight: 800;
				color: #231815;

				&:nth-child(2) {
					color: #EF821E;
					font-weight: 400;
				}
			}
		}

		.jifen {
			font-size: 24rpx;
			font-weight: 500;
			color: #444444;
		}

		.time {
			font-size: 24rpx;
			font-weight: 300;
			color: #999999;
		}
	}
}

.uiwu-list-scroll {
	width: 100%;
	margin-top: 20rpx;
	height: calc(100vh - 102rpx);
	/* #ifdef H5 */
	height: calc(100vh - 102rpx - 44px);
	/* #endif */
}
</style>
